<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div>
				<span>n的值：{{n}}</span>
				<button @click="n = n+1">更新数据n</button>
			</div>
			<div>
				<input type="text" v-fbind:value="n"/>
			</div>
		</div><\br>
		<div id="root2">
			<div>
				<span>n的值：{{n}}</span>
				<button @click="n = n+1">更新数据n</button>
			</div>
			<div>
				<input type="text" v-fbind:value="n"/>
			</div>
		</div>
		<div id="root3">
			<!-- <div>
				n 的值：<span>{{n}}</span>
			</div> -->
			<div>
				n 放大10倍：<span v-big="n"></span>
			</div>
			<button @click="n = n + 1">将n加1</button>
		</div>
		
		<script type="text/javascript">
			// 注册全局自定义指令（对象式）
			Vue.directive('fbind',{
				// 指令与元素成功绑定时调用的函数
				bind(element,binding) {
					console.log('指令与元素绑定');
					// 设置元素的value值
					element.value = binding.value
				},
				// 指令所在的元素被放入页面时调用的函数
				inserted(element,binding) {
					console.log('元素插入页面');
					// 设置元素自动获取焦点
					element.focus()
				},
				// 指令所在元素所处的模板被更新时调用的函数
				update(element,binding) {
					console.log('指令所在元素所处的模板被更新');
					// 需要重新设置value值
					element.value = binding.value
					// 重新设置自动获取焦点
					element.focus()
				}
			})
			// 注册全局自定义指令（函数式）
			Vue.directive('big',function(element,binding) {
				// 此时函数内this对象不再是vue实例对象
				console.log('this:',this)
				// 当改指令绑定的元素所在的vue模板被更新时就会调用这个函数
				console.log('v-big指令被调用了！')
				// element 参数为与该指令绑定的元素，
				console.log('element参数：',element)
				// element 是一个真实的DOM元素
				console.dir(element) // 拥有真实DOM元素的所有属性和方法
				console.log(element instanceof HTMLElement) // true
				// binding 为绑定对象，该对象中有一个value属性，就是该指令绑定的值
				console.log('binding参数：',binding)
				// 将n的值放大十倍，替换到对应标签内
				element.innerText = binding.value * 10;
				
			})
			const vm = new Vue({
				el: "#root",
				data: {
					n: 1
				},
				directives: {
					
				}
			})
			const vm2 = new Vue({
				el: "#root2",
				data: {
					n: 1
				},
				directives: {
					
				}
			})
			const vm3= new Vue({
				el: "#root3",
				data: {
					n: 1
				},
				directives: {
					
				}
			})
		</script>
	</body>
</html>